// 定义路由表
// 以前的引入方式
// import Home from './pages/Home'
// import About from './pages/About'
// import News from './pages/News'
// import Message from './pages/Message'
// import Detail from './pages/Detail'
// 组件懒加载的引入方式
import React, { Suspense } from 'react'
const Home = React.lazy(() => import('./pages/Home'))
const About = React.lazy(() => import('./pages/About'))
const News = React.lazy(() => import('./pages/News'))
const Message = React.lazy(() => import('./pages/Message'))
const Detail = React.lazy(() => import('./pages/Detail'))
const load = (Com) => {
  return (
    <Suspense
      fallback={<div style={{ color: 'red', fontSize: 40 }}>loading...</div>}
    >
      <Com></Com>
    </Suspense>
  )
}

export default [
  {
    path: '/home',
    element: load(Home),
    children: [
      {
        path: '/home/news',
        element: load(News),
      },
      {
        path: '/home/message',
        element: load(Message),
        children: [
          {
            path: '/home/message/detail',
            children: [
              {
                path: '/home/message/detail/:id',
                element: load(Detail),
              },
              {
                path: '',
                element: load(Detail),
              },
            ],
          },
        ],
      },
    ],
  },
  {
    path: '/about',
    element: load(About),
  },
]
